<template>
	<view class="pageFixed" @touchmove.prevent>
		<uni-popup ref="popup" background-color="#eee" :safe-area="false" :padding="padding">
			<view class="content">
				<view class="head">
					<view class="info">
						<view class="info-img">
							<image :src="imgurl" class="image"></image>
						</view>
						<view class="price-info">
							<view class="price-title">
								￥
								<text v-if="!priceShow">{{ goodsInfo.default_price }}</text>
								<text v-if="priceShow" style="font-size: 35rpx;">{{ price.dayRent }}</text>
								/天
								<text v-if="priceShow && price.dayRent_new"
									style="font-size: 25rpx; color: #000; margin-left: 10rpx;">
									首月￥{{ price.dayRent_new }}/天
								</text>
								<image v-if="priceShow && price.dayRent_new" src="@/static/images/goodsDetails/end1.gif"
									style="width: 60rpx; height: 30rpx; margin: 0 0 10rpx 10rpx;">
								</image>
							</view>
							<view>
								<text style="font-size: 30rpx;">已选：</text>
								<text class="f13">{{ activity1.title }}
									<text v-if="activity2.title && activity1.title">,</text>
									{{ activity2.title }}
									<text v-if="activity3.title && activity2.title">,</text>
									{{ activity3.title }}
									<text v-if="activity4.title && activity3.title">,</text>
									{{ activity4.title }}
								</text>
							</view>
						</view>
					</view>

					<view class="price" :class="{active:priceShow}">
						<view class="price-item">
							<view class="red">
								￥{{ price.firstRent_new ? price.firstRent_new: price.firstRent }}
							</view>
							<view class="price-text">首期租金</view>
						</view>
						<view class="price-item">
							<view class="default-price" v-show="price.totalRentNew">
								￥{{price.totalRent}}
							</view>
							<view class="red">
								￥{{ price.totalRentNew ? price.totalRentNew: price.totalRent }}
							</view>
							<view class="price-text">总租金</view>
						</view>
						<view class="price-item">
							<view class="red">￥{{ price.totalValue }}</view>
							<view class="price-text">买断价</view>
						</view>
					</view>
				</view>
				<view class="menu">
					<view class="f13">租赁套餐</view>
					<text v-for="(item, index) in goodsInfo.pact_type"
						:class="['text', index === activity1.index ? 'index' :'']" :data-text="item"
						@click="clickActivity1(index, $event)" :key="index">
						{{ item }}</text>
					<view class="f13">颜色</view>
					<text v-for="(item, index) in color" :class="['text', index === activity2.index ? 'index' :'']"
						:data-text="item.value" @click="clickActivity2(index, $event)"
						:key="index">{{ item.value }}</text>
					<view class="f13">规格</view>
					<text v-for="(item, index) in guige" :class="['text', index === activity3.index ? 'index' :'']"
						:data-text="item.value" @click="clickActivity3(index, $event)"
						:key="index">{{ item.value }}</text>
					<view class="f13">租期</view>
					<text v-for="(item, index) in time" :class="['text', index === activity4.index ? 'index' :'']"
						:data-text="item.value" @click="clickActivity4(index, $event)"
						:key="index">{{ item.value }}</text>
					<view class="img-box" v-if="unicom.length">
						<image class="unicom-img" src="@/static/images/unicom_01.png" mode="widthFix"></image>
					</view>
					<text v-for="(item, index) in unicom" :class="['text', index === unicomIndex ? 'index' :'']"
						@click="selectUnicom(index)" :key="index">
						{{ item.value }}
					</text>
					<view class="img-box" v-if="insurance.length">
						<image class="scale" src="@/static/images/unicom_02.png" mode="widthFix"></image>
					</view>
					<text v-for="(item, index) in insurance" :class="['text', index === insuranceIndex ? 'index' :'']"
						@click="selectinsurance(index)" :key="index">
						{{ item.value }}
					</text>
					<view style="display: flex; justify-content: space-between; align-items: center;">
						<view class="f13">租赁数量</view>
						<view class="compute">
							<text class="text" @click="mun"> - </text>
							<text class="text" style="padding: 10rpx 30rpx;">{{ count }}</text>
							<text class="text" @click="add"> + </text>
						</view>
					</view>
					<view style="position: fixed;bottom: 10rpx;width: 100%;left: -5rpx;background-color: #fff;">
						<button class="button" v-if="!tel" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
							:disabled="!priceShow" :class="[priceShow ? 'click' : 'noClick']"
							style="color: #fff;">查看免押额度</button>
						<button class="button" v-else @click="toDetail" :disabled="!priceShow"
							:class="[priceShow ? 'click' : 'noClick']" style="color: #fff;">查看免押额度</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "goodMenu",
		props: {
			goodsInfo: {
				type: Object
			}
		},
		data() {
			return {
				padding: 0,
				id: null,
				unicomIndex: "",
				insuranceIndex: "",
				activity1: {
					id: 1,
					index: null, //控制样式
					title: "" //获取套餐信息发送至后端
				},
				activity2: {
					id: 2,
					index: null,
					title: ""
				},
				activity3: {
					id: 3,
					index: null,
					title: ""
				},
				activity4: {
					id: 4,
					index: null,
					title: ""
				},
				imgurl: '', //展示图片
				color: [], //颜色选择
				guige: [], //规格选择
				time: [], //租期选择
				price: {}, //获取到的价格
				unicom: [],
				insurance: [],
				count: 1, //数量
				tel: '',
				priceShow: false //判断是否显示具体价格以及按钮样式是否可以点击
			};
		},
		methods: {
			selectinsurance(index) {
				this.insuranceIndex = index;
			},
			selectUnicom(index) {
				this.unicomIndex = index;
			},
			// 打开弹窗
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			// 控制选择的样式以及获取到选择的数据
			clickActivity1(i, e) {
				if (this.activity1.index === i) {
					this.activity1.index = null
					this.activity1.title = ""
					this.priceShow = false
				} else {
					this.activity1.index = i
					this.activity1.title = e.currentTarget.dataset.text
				}
				if (this.activity1.index !== null && this.activity2.index !== null && this.activity3.index !== null && this
					.activity4.index !== null) {
					this.getPrice()
				} else return
			},
			clickActivity2(i, e) {
				if (this.activity2.index === i) {
					this.activity2.index = null
					this.activity2.title = ""
					this.priceShow = false
				} else {
					this.activity2.index = i
					this.activity2.title = e.currentTarget.dataset.text
				}
				if (this.activity1.index !== null && this.activity2.index !== null && this.activity3.index !== null && this
					.activity4.index !== null) {
					this.getPrice()
				} else return
			},
			clickActivity3(i, e) {
				if (this.activity3.index === i) {
					this.activity3.index = null
					this.activity3.title = ""
					this.priceShow = false
				} else {
					this.activity3.index = i
					this.activity3.title = e.currentTarget.dataset.text
				}
				if (this.activity1.index !== null && this.activity2.index !== null && this.activity3.index !== null && this
					.activity4.index !== null) {
					this.getPrice()
				} else return
			},
			clickActivity4(i, e) {
				if (this.activity4.index === i) {
					this.activity4.index = null
					this.activity4.title = ""
					this.priceShow = false
				} else {
					this.activity4.index = i
					this.activity4.title = e.currentTarget.dataset.text
				}
				if (this.activity1.index !== null && this.activity2.index !== null && this.activity3.index !== null && this
					.activity4.index !== null) {
					this.getPrice()
				}
			},
			// 判断库存再进行数量增加
			add() {
				if (this.count < this.price.quantity) this.count++
			},
			// 数量为1不再减
			mun() {
				if (this.count === 1) return
				this.count--
			},
			// 获取价格
			getPrice() {
				const basePath = "/Wechat/Goods/getGoodsPrices?allDataList=";
				let params = [{
					title: this.activity1.title + ','
				}, {
					title: this.activity2.title + ','
				}, {
					title: this.activity3.title.replace('+', '@') + ','
				}, {
					title: this.activity4.title
				}];

				let url = `${basePath + JSON.stringify(params)}&goods_id=${ this.goodsInfo.id }&activity_id=${ this.goodsInfo.activity.length==0?'':this.goodsInfo.activity.length==0?'':this.goodsInfo.activity[0].id }`;

				if (this.goodsInfo.activity.length !== 0) {
					url += `&activity_id=${ this.goodsInfo.activity.length==0?'':this.goodsInfo.activity[0].id }`;
				}

				uni.$http.get(url)
					.then(res => {
						this.priceShow = true
						this.imgurl = getApp().globalData.baseImg + res.data.data.meal_img
						this.price = res.data.data
						this.bankFlag=res.data.data.is_have
					})
			},
			// 判断获取手机号和是否登录
			getPhoneNumber(e) {
				if (getApp().globalData.token === "") {
					uni.$showMsg('您还未登录，正在前往登录')
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/my/my'
						})
					}, 2000)
				} else if (getApp().globalData.tel === '') {
					let code = e.detail.code
					let query = {
						code,
						openId: getApp().globalData.openId
					}
					uni.$http.post('/Wechat/Auth/grantAuthPhone', query).then(res => {
						console.log(res)
						if (res.data.status === 100) return uni.$showMsg('您取消授权手机号')
						getApp().globalData.tel = res.data.data.mobile
						uni.setStorageSync('tel', res.data.data.mobile)
						this.toDetail();
					})
				}
			},
			// 已登录已获取手机号
			toDetail() {
				uni.navigateTo({
					url: `/pagesA/my/order/makeOrder/makeOrder?id=${ this.id }&amount=${ this.count }&setmeal_id=${ this.price.setmealId }&spec_id=${ this.price.leaseId }&activity=${ this.goodsInfo.activity.length==0?'':this.goodsInfo.activity[0].id }`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.f13 {
		font-size: 26rpx;
	}

	.pageFixed {

		.content {
			height: 80vh;
			background-color: #fff;
			overflow-y: auto;

			.head {
				background-color: #fff;
				border-bottom: 10rpx solid #efefef;

				.info {
					display: flex;
					padding: 20rpx;

					.info-img {
						padding: 5rpx;
						border: 1rpx solid #eee;

						.image {
							height: 180rpx;
							width: 180rpx;
						}
					}

					.price-info {
						margin-left: 30rpx;

						.price-title {
							color: #ff0000;
						}


					}
				}



				.price {
					opacity: 0;
					z-index: -9999;
					padding: 0 70rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;


					&.active {
						opacity: 1;
						z-index: 1;
					}

					.default-price {
						text-align: center;
						color: #929292;
						font-size: 24rpx;
						text-decoration: line-through;
					}

					.price-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.red {
							font-size: 28rpx;
							color: #ff0000;
						}

						.price-text {
							color: #999;
							font-size: 22rpx;
						}
					}
				}
			}

			.menu {
				padding: 20rpx;
				padding-bottom: 100rpx;
				background-color: #fff;
				margin-top: 20rpx;

				.scale {
					width: 140rpx;
				}

				.text {
					display: inline-block;
					background-color: rgb(239, 239, 239);
					padding: 15rpx 35rpx;
					border-radius: 30rpx;
					margin: 10rpx 15rpx;
					font-size: 12px;
					border: 1rpx solid transparent;
				}

				.index {
					color: #E1261B;
					border: 1rpx solid #E1261B;
					background-color: rgb(255, 243, 243);
					font-size: 12px;
				}
			}

			/*  */
			.compute .text {
				display: inline-block;
				border: 1rpx solid #eee;
				padding: 10rpx;
				border-radius: 0;
			}
		}
	}

	.unicom-img {
		width: 180rpx;
	}

	.ingo-img {
		padding: 10rpx;
		border: 1rpx solid #eee;
	}




	/*  */
	.button {
		width: 90%;
		border-radius: 40rpx;
		text-align: center;
	}

	.click {
		height: 80rpx;
		line-height: 80rpx;
		background-color: rgb(241, 47, 37);
	}

	.noClick {
		height: 80rpx;
		line-height: 80rpx;
		background-image: linear-gradient(to right, rgb(91, 87, 86), rgb(184, 178, 178));
	}
</style>
